<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
    var childIndex = 0;
    //alert("beginig" + childIndex);
    $(function () {

        if ($('#landMode').val() == 'DETAIL') {
            var childCounts = document.getElementById('childrenTable').rows.length;
            var count = 0;
            for (; count < childCounts; count++) {
                addChildrenValidationRule(count);

            }
        }
    });

    function addChildRow(tableID) {
        //alert("childIndex=>"+childIndex);

        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var count = parseInt(rowCount) / 2;
        var row1 = table.insertRow(rowCount);
        var row2 = table.insertRow(rowCount + 1);
        var row3 = table.insertRow(rowCount + 2);

        var male = document.getElementById("male-label").value;
        var female = document.getElementById("female-label").value;
        // var unknown = document.getElementById("unknown-label").value;
        //alert("add clild row" + childIndex);
        var str1 = '<td>' + $('#child-name').val() + '<span class="mandatory-field"></span></td><td colspan="3">'
                + '<input type="text" style="width:400px" id="name' + childIndex + '" name="alienation.holder.children[' + childIndex + '].fullName"/>'
                + '<input type="button" onclick="deleteChild(' + childIndex + ')" value="' + $("#delete").val() + '"/></td>';
        var str2 = '<td>' + $('#is-disable').val() + '</td><td colspan="3">'
                + '<input type="radio" name="alienation.holder.children[' + childIndex + '].disable" value="false">' + $('#noId').val() + '</input>'
                + '<input type="radio" name="alienation.holder.children[' + childIndex + '].disable" value="true">' + $('#yesId').val() + '</input>'
                + '</td>';
        var str3 = '<td>' + $('#gender-label').val() + '</td><td>'
                + '<select style="width: 120px" name="alienation.holder.children[' + childIndex + '].gender">'
                + '<option value="1">' + female + '</option>'
                + '<option value="0">' + male + '</option>'
                + '</select>'
                + "</td><td>" + $('#child-dob').val()
                + '<s:label value="%{getText('date_format.label')}" cssClass="date-format"/>'
                + "</td><td>"
                + '<s:textfield  cssClass="childDOB" style="width:150px;" id="dateOfBirth' + childIndex + '" name="alienation.holder.children[' + childIndex + '].dateOfBirth" onKeyPress="return dateNumbersOnly(event,true)"/>'
                + "</td>";
        row1.innerHTML = str1;
        row2.innerHTML = str2;
        row3.innerHTML = str3;
        row1.setAttribute('id', 'row1' + childIndex);
        row2.setAttribute('id', 'row2' + childIndex);
        row3.setAttribute('id', 'row3' + childIndex);
        setDatePicker();

        addChildrenValidationRule(childIndex);

        childIndex++;
    }


    function deleteChild(index) {

        var table = document.getElementById('childrenTable');
        table.deleteRow($('#row1' + index).index());
        table.deleteRow($('#row2' + index).index());
        table.deleteRow($('#row3' + index).index());
        //TODO: no need to reduce the index
        childIndex--;
    }


    function addChildrenValidationRule(id) {

        $('#name' + id).rules("add", {
            childName: true,
            messages:{
                childName: "<br/>" + $('#enterChildName').val()
            }
        });

        $('#dateOfBirth' + id).rules("add", {
            isDateFormated: true,
            isFeatureDate:true}

                );

    }

    function setDatePicker() {
        var dO = new Date();
        var d = dO.getDate();
        var m = dO.getMonth();
        var y = dO.getFullYear();
        var today = y + "-" + m + "-" + d;
        var id;
        $('.childDOB').DatePicker({
            format:'Y-m-d',
            date:dO,
            current:dO,
            position:'right',
            onBeforeShow:function () {
                id = "#" + this.id;
                $('.childDOB').DatePickerSetDate(dO, true);
            },
            onChange:function (formated, dates) {

                $(id).val(formated);

            }
        });
    }
    //alert("eof" + childIndex);
</script>
<table>
<tr>
    <td>
        <s:label id="childrenLabel" value="%{getText('children.label')}"/>
        <%-- <s:textfield id="childError" cssStyle="display:none"/> --%>
    </td>
    <td colspan="3">
        <table id="childrenTable">
          <s:iterator status="status" value="alienation.holder.children">
                <tr id="<s:property value="%{'row1' + (#status.count-1)}"/>">
                    <s:if test="editMode == 1">
                        <s:hidden name="%{'alienation.holder.children[' +( #status.count-1)+'].id'}"/>
                    </s:if>
                    <td><s:label value="%{getText('name.label')}"/><span class="mandatory-field"></span></td>
                    <td colspan="3">
                        <s:textfield value="%{fullName}" cssClass="width-400-px" rows="1"
                                     name="%{'alienation.holder.children[' +( #status.count-1)+'].fullName'}"
                                     id="%{'name'+( #status.count-1)}"
                                     disabled="%{isDisableMode()}"/>
                        <s:submit type='button' onclick="deleteChild('%{(#status.count-1)}');return false;"
                                    value="Delete" disabled="%{isDisableMode()}"/>
                        <script type="text/javascript">
                            childIndex ++;
                            // alert("improve child index " + childIndex)
                        </script>
                    </td>
                </tr>
                <tr id="<s:property value="%{'row2' + (#status.count-1)}"/>">
                    <td><s:label value="%{getText('isDisable.label')}"/></td>
                    <td colspan="3">
                        <s:radio
                                list="#@java.util.HashMap@{'true':getText('yes.label'), 'false':getText('no.label')}"
                                name="%{'alienation.holder.children[' +( #status.count-1)+'].disable'}"
                                disabled="%{isDisableMode()}"/>
                    </td>
                </tr>
              <tr id="<s:property value="%{'row3' + (#status.count-1)}"/>">
                    <td><s:label value="%{getText('gender.label')}"/></td>
                    <td>
                        <s:select list="#@java.util.HashMap@{'0':getText('male.label'),'1':getText('female.label')}"
                                  name="%{'alienation.holder.children[' +( #status.count-1)+'].gender'}"
                                  cssClass="width-200-px" disabled="%{isDisableMode()}"/>
                    </td>
                    <td><s:label value="%{getText('date_of_birth.label')}"/></td>
                    <td>
                        <s:textfield value="%{dateOfBirth}"
                                     name="%{'alienation.holder.children[' +( #status.count-1)+'].dateOfBirth'}"
                                     id="%{'dateOfBirth'+( #status.count-1)}"
                                     cssClass="childDOB width-150-px" disabled="%{isDisableMode()}"
                                     onKeyPress="return dateNumbersOnly(event,true)"/>

                    </td>
                </tr>
            </s:iterator>
        </table>
    </td>
</tr>
 </table>
 <table style="width: 100%">
<tr>

     <td colspan="1" class="right-align" >
        <s:if test="land.approvalState.ordinal() == 2 && user.role.id == \"ORDS\"">
            <INPUT id="addChild" type="button" value="Add Child" onclick="addChildRow('childrenTable')" disabled="true"/>
        </s:if>
        <s:else>
            <INPUT id="addChild" type="button" value="Add Child" onclick="addChildRow('childrenTable')" />
        </s:else>
    </td>
</tr>
</table>
<s:hidden id="child-name" value="%{getText('name.label')}"/>
<s:hidden id="child-dob" value="%{getText('date_of_birth.label')}"/>
<s:hidden id="is-disable" value="%{getText('isDisable.label')}"/>
<s:hidden id="yesId" value="%{getText('yes.label')}"/>
<s:hidden id="noId" value="%{getText('no.label')}"/>
<s:hidden id="delete" value="%{getText('delete.label')}"/>